<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <title>Rax implementation of DBMonster</title>
  <link href="//leeluolee.github.io/js-repaint-perfs/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
  <script src="//unpkg.com/web-rax-framework@0.0.4/dist/framework.web.js"></script>
  <script src="//mathieuancelin.github.io/js-repaint-perfs/ENV.js"></script>
  <script src="//localvoid.github.io/perf-monitor/0.1/perf-monitor.js"></script>
  <script src="//unpkg.com/babel-standalone@6.18.2/babel.min.js"></script>
  <script type="text/babel">

  /* @jsx createElement */
  import {createElement, Component, render} from 'rax';

  class Query extends Component {
    shouldComponentUpdate({ query, elapsed }) {
      return query!==this.props.query || elapsed!==this.props.elapsed;
    }

    render() {
      let { query, elapsed, formatElapsed, elapsedClassName } = this.props;
      return (
        <td className={'Query ' + elapsedClassName}>
          { formatElapsed || ' ' }
          <div className="popover left">
            <div className="popover-content">{ query }</div>
            <div className="arrow" />
          </div>
        </td>
      );
    }
  }


  class Database extends Component {
    shouldComponentUpdate({ lastMutationId }) {
      return lastMutationId!==this.props.lastMutationId;
    }

    renderQuery(query) {
      return (
        <Query
          query={query.query}
          elapsed={query.elapsed}
          formatElapsed={query.formatElapsed}
          elapsedClassName={query.elapsedClassName}
        />
      );
    }

    render() {
      let { lastSample, dbname } = this.props;
      return (
        <tr>
          <td className="dbname">
            {dbname}
          </td>
          <td className="query-count">
            <span className={lastSample.countClassName}>
              {lastSample.nbQueries}
            </span>
          </td>
          { lastSample.topFiveQueries.map(this.renderQuery) }
        </tr>
      );
    }
  }


  class DBMon extends Component {
    state = {
      databases: []
    };

    loadSamples = () => {
      perfMonitor.startProfile('State update');
      this.setState({
        databases: ENV.generateData(true).toArray()
      });
      perfMonitor.endProfile('State update');
      setTimeout(this.loadSamples, ENV.timeout);
    };

    componentDidMount() {
      this.loadSamples();
    }

    render() {
      let databases = this.state.databases;

      let databaseElements = [];
      for (let i = 0; i < databases.length; i++) {
        let database = databases[i];
        databaseElements[i] = <Database
          lastMutationId={database.lastMutationId}
          dbname={database.dbname}
          samples={database.samples}
          lastSample={database.lastSample}
        />;
      }

      return (
        <div>
          <table className="table table-striped latest-data">
            <tbody>
              {databaseElements}
            </tbody>
          </table>
        </div>
      );
    }
  }

  render(<DBMon />);

  perfMonitor.startFPSMonitor();
  perfMonitor.startMemMonitor();
  perfMonitor.initProfiler('State update');

  </script>
</body>
</html>
